import React, { Component } from "react";
import withPortal from "./withPortal";

import "./style.css";
import { bool, string, func, oneOfType, number } from "prop-types";

@withPortal
class Modal extends Component {
  static propTypes = {
    open: bool.isRequired,
    title: string,
    onOk: func,
    onCancel: func,
    cancelText: string,
    okText: string,
    width: oneOfType([string, number]),
  };

  static defaultProps = {
    width: 400,
    cancelText: "取消",
    okText: "确定",
  };

  render() {
    const { open, title, children, onOk, onCancel, cancelText, okText, width } =
      this.props;
    return (
      open && (
        <div className="shadow">
          <div className="center" style={{ width: width + "px" }}>
            <header>{title}</header>
            <main>{children}</main>
            <footer>
              <button onClick={onCancel}>{cancelText}</button>
              <button onClick={onOk}>{okText}</button>
            </footer>
          </div>
        </div>
      )
    );
  }
}

export default Modal;
